<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <van-index-bar @select="handleChange">
            <div v-for="item in cityList" :key="item.type">
                <van-index-anchor :index="item.type"></van-index-anchor>
                <div v-for="data in item.list" :key="data.cityId">
                    <van-cell :title="data.name" @click="handlecity(data.name,data.cityId)"/>
                </div>
            </div>
        </van-index-bar>
    </div>
</template>
<script>
import http from '@/util/http'
import { Toast } from 'vant'
// import { Search } from 'vant'
import mixin from '@/util/mixinObj'
export default {
  mixins: [mixin],
  data () {
    return {
      cityList: []
    }
  },
  mounted () {
    http({
      url: '/gateway?k=182954',
      headers: {
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then(res => {
      this.cityList = this.renderCity(res.data.data.cities)
      console.log(this.cityList)
    })
  },
  methods: {
    handleChange (data) {
      Toast(data)
    },
    handlecity (cityName, cityId) {
      this.$store.commit('changeCityName', cityName)
      this.$store.commit('changeCityId', cityId)
      this.$router.back()
    },
    renderCity (list) {
      const letterList = []
      const cityList = []
      for (let i = 65; i < 91; i++) {
        letterList.push(String.fromCharCode(i))
      }
      letterList.forEach(letter => {
        // eslint-disable-next-line no-unused-vars
        const newList = list.filter(item => item.pinyin
          .substring(0, 1).toUpperCase() === letter)

        if (newList.length > 0) {
          cityList.push({
            type: letter,
            list: newList
          })
        }
      })
      return cityList
    }
  }

}
</script>
<style lang="scss">
.van-toast--html, .van-toast--text{
  min-width:1.875rem;
}
</style>
